<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - ol4加载百度在线地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="baiduMap2" style="width: 100%"></div>
<script>

    // 自定义分辨率和瓦片坐标系
    var resolutions = [];
    var maxZoom = 18;

    // 计算百度使用的分辨率
    for(var i=0; i<=maxZoom; i++){
        resolutions[i] = Math.pow(2, maxZoom-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],    // 设置原点坐标
        resolutions: resolutions  // 设置分辨率
    });

    // 创建百度地图的数据源
    var baiduSource = new ol.source.TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            // 百度瓦片服务url将负数使用M前缀来标识
            if(x<0){
                x = 'M' + (-x);
            }
            if(y<0){
                y = 'M' + (-y);
            }

            return "http://online0.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20160426&scaler=1&p=0";
        }
    });

    // 百度地图层
    var baiduMapLayer2 = new ol.layer.Tile({
        source: baiduSource
    });

    // 创建地图
    new ol.Map({
        layers: [
            baiduMapLayer2
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        }),
        target: 'baiduMap2'
    });
</script>
</body>
</html>